<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<image class="logo" src="/static/logo.png" mode="aspectFit" />
			<view class="notification-text" @click="seeinfos">
				<uni-icons type="notification" size="20" color="#FF5722"></uni-icons>
				<swiper class="notice-swiper" autoplay vertical circular :interval="6000">
					<swiper-item v-for="item in notice">
						<text class="notice-item"> {{item.name}} </text>
					</swiper-item>

				</swiper>
			</view>
		</view>
		<!-- Banner区域 -->
		<view class="banner-container">
			<swiper class="banner" autoplay circular>
				<swiper-item v-for="item in banner">
					<image class="banner-image" :src="item.image" mode="aspectFill" />
				</swiper-item>

			</swiper>
		</view>


		<!-- 注册店铺  -->

		<view v-if="merch==0" class="shopzr" @click="renzheng">

			<view class="shopzr_log">
				<uni-icons type="gift-filled" size="36" color="#ffffff" />
			</view>
			<view class="shopzr_tit">
				开始店铺认证
				<uni-icons type="arrow-right" size="14" color="#ffffff" />
			</view>
		</view>

		<!-- 待认证-->

		<view class="shopinfo" v-if="merch==1">

			<view class="showinfo_img">
				<image src="/static/dp.png" mode=""></image>
			</view>

			<view class="showinfo_name">
				店铺信息店铺信息
			</view>

			<view class="showinfo_rz">
				<image src="/static/rz.png" mode=""></image>
			</view>
		</view>

		<!-- 店铺信息待审核 -->
		<view class="shopinfo" v-if="merch==2">

			<view class="showinfo_img">
				<image src="/static/dp.png" mode=""></image>
			</view>

			<view class="showinfo_name">
				店铺信息店铺信息
			</view>

			<view class="showinfo_rz">
				<image src="/static/shz.png" mode=""></image>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		curl
	} from 'common/api.js';
	export default {
		data() {
			return {
				banner: [],
				merch:0,
				notice:[]
			}
		},
		onLoad(ret) {
			uni.setNavigationBarTitle({
				title: '首页'
			})
			this.getbanner();
			this.getnotice();
			this.getmymerch();
		},
		methods: {
			// 幻灯片
			getbanner() {
				var that = this;
				curl('index/banner', {}).then((res) => {
					console.log(res.data);
					that.banner = res.data
				});
			},

			// 通知
			getnotice() {
				var that = this;
				curl('index/getnotice', {}).then((res) => {
					console.log(res.data);
					that.notice = res.data
				});
			},
			//消息信息
			seeinfos() {
				uni.navigateTo({
					url: "/pages/msg/index"
				})
			},
			//认证
			renzheng(){
				uni.navigateTo({
					url:"/pages/merch/index"
				})
			},
			//店铺信息
			getmymerch(){
				
				var that = this;
				curl('merch/getmymerch', {}).then((res) => {
					console.log(res.data);
					that.merch = res.data.merch
				});
				
			}

		}
	}
</script>

<style>
	.showinfo_rz>image {
		width: 50rpx;
		height: 50rpx;
	}

	.showinfo_rz {
		width: 50rpx;
		height: 50rpx;
	}

	.showinfo_name {
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-left: 10rpx;
	}

	.showinfo_img>image {
		width: 70rpx;
		height: 70rpx;
	}

	.showinfo_img {
		width: 70rpx;
		height: 70rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.shopinfo {
		background: #EEF6FF;
		width: 710rpx;
		height: 120rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
	}

	.shopzr_tit {
		width: 500rpx;
		height: 80rpx;
		border-radius: 20rpx;
		margin: auto;
		text-align: center;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-weight: 500;
		background: linear-gradient(to right, #589DF9, #3F86F6);
	}

	// 这里添加一个简单的动态效果

	.shopzr_log {
		width: 120rpx;
		height: 120rpx;
		margin: 40rpx auto;
		text-align: center;
		line-height: 120rpx;
		background: linear-gradient(to right, #589DF9, #3F86F6);
		border-radius: 120rpx;
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(63, 134, 246, 0.7);
		}

		70% {
			transform: scale(1.05);
			box-shadow: 0 0 0 15rpx rgba(63, 134, 246, 0);
		}

		100% {
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(63, 134, 246, 0);
		}
	}

	.shopzr {
		width: 710rpx;
		height: 340rpx;
		border: 1px solid transparent;
		background: #EEF6FF;
		margin: 20rpx auto;
		border-radius: 20rpx;
	}

	page {
		height: 100%;
	}

	.container {
		height: 100%;
		background-color: #f7f7f7;
		padding: 20rpx 0rpx;
	}

	/* 顶部导航栏样式 */
	.header {
		/* background: #ffffff; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		margin-bottom: 20rpx;
		width: 720rpx;
		margin: auto;
	}

	.logo {
		width: 150rpx;
		height: 80rpx;
		border-radius: 10px;
	}

	.notification-text {
		flex: 1;
		height: 80rpx;
		margin-left: 10rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.notification-text uni-icons {
		margin-right: 15rpx;
	}

	.notice-swiper {
		width: 100%;
		height: 100%;
	}

	.notice-item {
		font-size: 14px;
		color: #666;
		line-height: 80rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Banner区域样式 */
	.banner-container {
		width: 710rpx;
		height: 300rpx;
		margin: 30rpx auto;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.banner {
		width: 100%;
		height: 100%;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
</style>